<template>
  <scale-box class="data-screen-container">
    <border-box-9>
      <!-- 头部 -->
      <div class="data-screen-header">
        <div class="header-lf">
          <!-- <span class="header-screening" @click="router.push(HOME_URL)">首页</span> -->
        </div>
        <div class="header-ct">
          <div class="header-ct-title">
            <span>无线网质量评估平台</span>
            <!-- <div class="header-ct-warning">平台高峰预警信息（2条）</div> -->
          </div>
        </div>
        <div class="header-rg">
          <span class="header-download" @click="linkTo">{{ linkToBtn }}</span>
          <span class="header-time">当前时间：{{ cruuentTime }}</span>
        </div>
      </div>

      <!-- 主体 -->
      <div class="data-screen-main">
        <!-- 主体左 -->
        <left-page />

        <!-- 主体中 -->
        <center-page />

        <!-- 主体右 -->
        <right-page />
      </div>
    </border-box-9>
  </scale-box>
</template>

<script setup>
// vue - core
import { ref, onMounted, onUnmounted, nextTick } from "vue";
import { useRouter /* useRoute */ } from "vue-router";
// datav
import { BorderBox9 } from "@kjgl77/datav-vue3";
// pages
import LeftPage from "./components/LeftPage.vue";
import CenterPage from "./components/CenterPage.vue";
import RightPage from "./components/RightPage.vue";
// utils
import ScaleBox from "@/components/SacaleAuto/index.vue";
import { getDateTimeNowFormate } from "@/utils/index.js";
// api
// api相关
import { apiCommon } from "@/utils/index.js";
import * as screenApi from "@/api/screen/screen";

/** props 参数 */
const props = defineProps({
  width: {
    type: Number,
    default: window.screen.width,
  },
  height: {
    type: Number,
    default: window.screen.height,
  },
  linkToBtn: {
    type: String,
    default: '返回',
  },
});

// let linkToBtn = ref('全屏')
let cruuentTime = ref(getDateTimeNowFormate());
let timmer = ref(null);
const router = useRouter();
// const route = useRoute()

// 接口测试
const apiTest = async () => {
  let params = {};
  const testData = await apiCommon(screenApi.getInfo, params);
  console.log(testData);
};
// apiTest()

const linkTo = () => {
  const { fullPath } = router.currentRoute.value

  switch (fullPath) {
    case '/index':
      router.push("/screen");
      break
    case '/screen':
      router.push("/");
      break
  }
};

// 页面初始化
const initPage = () => {
  // console.log('页面初始化')

  getcurrntTime(); //获取当前时间
};

// 获取当前时间
const getcurrntTime = () => {
  timmer.value = setInterval(() => {
    cruuentTime.value = getDateTimeNowFormate();
  }, 1000);
};

/**
 * 钩子
 */
// 挂载
onMounted(() => {
  initPage(); // 页面初始化
});

// 注销
onUnmounted(() => {
  clearInterval(timmer.value);
});

</script>

<style lang="scss" scoped>
.data-screen-container {
  /* background: #091f3f; */
  background: #05091B;

  :deep .scale_box {
    background: #05091b;

    .dv-border-box-9 {

      .data-screen-header,
      .data-screen-main {
        display: flex;
        position: absolute;
        width: 98.5%;
        left: 50.1%;
        transform: translateX(-50%);
      }

      .data-screen-header {
        top: 10px;
        height: 2.2vw;

        .header-lf,
        .header-rg {
          position: relative;
          width: 35vw;
          height: 100%;
          background: url("./images/data-screen-header-left-bg.png") no-repeat;
          background-size: 100% 100%;
        }

        .header-ct {
          position: relative;
          flex: 1;
          height: 100%;

          .header-ct-title {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4vw;
            font-family: YouSheBiaoTiHei;
            font-size: 1vw;
            line-height: 4vw;
            color: #05e8fe;
            text-align: center;
            letter-spacing: 4px;
            background: url("./images/data-screen-header-center-bg.png") no-repeat;
            background-size: 100% 100%;
            overflow: hidden;

            .header-ct-warning {
              position: absolute;
              bottom: -42px;
              left: 50%;
              width: 622px;
              height: 44px;
              font-family: YouSheBiaoTiHei;
              font-size: 14px;
              line-height: 44px;
              color: #ffffff;
              text-align: center;
              letter-spacing: 1px;
              background: url("./images/data-screen-header-warn-bg.png") no-repeat;
              background-size: 100% 100%;
              transform: translateX(-50%);
            }
          }
        }

        .header-screening,
        .header-download {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 9;
          box-sizing: border-box;
          width: 136px;
          height: 42px;
          padding-right: 4px;
          font-family: YouSheBiaoTiHei;
          font-size: 18px;
          font-weight: 400;
          line-height: 42px;
          color: #29fcff;
          text-align: center;
          cursor: pointer;
          background: url("./images/data-screen-header-btn-bg-l.png") no-repeat;
          background-size: 100% 100%;
        }

        .header-download {
          left: 0;
          padding-right: 0;
          background: url("./images/data-screen-header-btn-bg-r.png") no-repeat;
        }

        .header-time {
          position: absolute;
          top: 0;
          right: 10px;
          font-family: YouSheBiaoTiHei;
          font-size: 0.8vw;
          font-weight: 400;
          line-height: 2.7vw;
          color: #05e8fe;
          white-space: nowrap;
        }
      }

      .data-screen-main {
        top: 4.2vw;
        height: 89.5%;
        width: 98%;

        .data-screen-lf,
        .data-screen-rg,
        .data-screen-ct {
          overflow: hidden;

          .scroll_auto {
            width: 102%;
            height: 100%;
            overflow: auto;
          }
        }

        .data-screen-lf,
        .data-screen-rg {
          flex: 1;
          margin-top: -.4vw;

          .data-screen-top,
          .data-screen-center {
            margin-bottom: 0.5vw;
          }

          .data-screen-top,
          .data-screen-center,
          .data-screen-bottom {
            .data-screen-main-cont {
              height: 24.5vh;
              overflow: hidden;
            }
          }
        }

        .data-screen-lf,
        .data-screen-rg,
        .data-screen-ct {
          .data-screen-main-title {
            width: 100%;
            background: linear-gradient(to right, #225a74, #05091b);
            border-bottom-left-radius: 10px;
            margin-bottom: .4vw;

            /* background: url("./images/subTitle-bg.png") no-repeat; */
            span {
              display: block;
              padding: 0.6vw 0 0.6vw 0.8vw;
              width: 100%;
              color: #fff;
              font-weight: bold;
              font-size: 0.8vw;
            }
          }

          .data-screen-main-cont {
            width: 97%;
            padding-top: 15px;
            padding-left: 5px;
            box-sizing: border-box;
            min-height: 100px;
          }
        }

        .data-screen-lf {
          margin-left: 0.1vw;
        }

        .data-screen-rg {
          margin-right: 16px;
        }

        .data-screen-ct {
          position: relative;
          left: -4px;
          width: 49%;
          padding: 1vw 1.4vw 0 0.4vw;
        }
      }
    }
  }
}
</style>
